<template>
  <div>
    <h1>课程管理</h1>
    <div style="margin-bottom: 10px;">
      <el-input v-model="keyword" size="small" placeholder="搜索课程" />
    </div>
    <el-table :data="filteredCourses" stripe>
      <el-table-column prop="id" label="课程 ID"></el-table-column>
      <el-table-column prop="name" label="课程名称"></el-table-column>
      <el-table-column prop="point" label="学分"></el-table-column>
      <el-table-column prop="time" label="学时"></el-table-column>
      <el-table-column align="right">
        <template #default="scope">
          <el-button size="small">
            Edit
          </el-button>
          <el-button
              size="small"
              type="danger"
          >
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CourseManagementView',
  data() {
    return {
      courses: [],
      keyword: ''
    };
  },
  computed: {
    filteredCourses() {
      if (!this.keyword) {
        return this.courses;
      }
      return this.courses.filter(course => {
        return course.name.includes(this.keyword);
      });
    }
  },
  methods: {
    // 加载课程数据的方法
    loadCourses() {
      this.$axios.get('/findCourse')
          .then(result => {
            if (result.data.status === 200) {
              console.log('接口返回数据：', result.data.data); // 添加日志输出
              this.courses = result.data.data;
            }
          })
          .catch(error => {
            console.error('加载课程数据失败:', error);
          });
    }
  },
  mounted() {
    // 在组件挂载后调用加载课程数据的方法
    this.loadCourses();
  }
};
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>